<div class="mst">
  <nz-alert
    nzMessage="Success Text"
    nzType="success"
    nzShowIcon
    [nzAction]="action1"
  ></nz-alert>
  <ng-template #action1>
    <button nz-button nzType="text" nzSize="small">Undo</button>
  </ng-template>

  <nz-alert
    nzMessage="Error Text"
    nzDescription="Error Description Error Description Error Description Error Description"
    nzType="error"
    nzShowIcon
    [nzAction]="action2"
  ></nz-alert>
  <ng-template #action2>
    <button nz-button nzDanger nzSize="small">Detail</button>
  </ng-template>

  <nz-alert
    nzMessage="Warning Text"
    nzType="warning"
    nzCloseable
    [nzAction]="action3"
  ></nz-alert>
  <ng-template #action3>
    <button nz-button nzSize="small" nzType="primary" nzGhost>Ignore</button>
  </ng-template>

  <nz-alert
    nzMessage="Info Text"
    nzDescription="Info Description Info Description Info Description Info Description"
    nzType="info"
    nzShowIcon
    [nzAction]="action4"
  ></nz-alert>
  <ng-template #action4>
    <nz-space nzDirection="vertical">
      <button nz-button nzSize="small" nzType="primary" *nzSpaceItem>
        Accept
      </button>
      <button
        nz-button
        nzSize="small"
        nzType="primary"
        nzDanger
        nzGhost
        *nzSpaceItem
      >
        Decline
      </button>
    </nz-space>
  </ng-template>
</div>
